<!--
 * @Description: 食谱食材信息
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-05 17:20:14
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-07 19:57:55
 -->
<template>
  <div>
    <el-button size="small" type="primary" @click="showCopyRecipe"> 复制食谱 </el-button>
    <el-dialog
      :visible.sync="copyRecipeShow"
      title="自定义食谱的服务订单"
      width="700px">
      <div class="search-box">
        <el-input v-model="query.service_id" size="small" placeholder="服务订单ID" style="width:120px;" @keyup.enter.native="toQuery" />
        <el-input v-model="query.delivery_name" size="small" placeholder="姓名" style="width:150px;" @keyup.enter.native="toQuery" />
        <el-input v-model="query.phone" size="small" placeholder="手机号" style="width:150px;" @keyup.enter.native="toQuery" />
        <el-button type="primary" size="small" class="el-icon-search" @click="toQuery">搜索</el-button>
        <el-button size="small" class="el-icon-q" @click="repeal">撤销</el-button>
      </div>
      <el-table v-loading.body="tableLoading" :data="serviceList" border fit highlight-current-row max-height="400" @current-change="handleCurrentChange">
        <el-table-column
          width="60">
          <template slot-scope="scope">
            <el-radio v-model="radio" :label="scope.row.id" class="radio-18"><span/></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="ID" prop="id" width="100" />
        <el-table-column label="姓名" prop="delivery_name" />
        <el-table-column label="昵称" prop="nick_name" />
        <el-table-column label="手机号" prop="phone" />
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button type="warning" @click="cancelCopy">取消</el-button>
        <el-button type="primary" @click="copyRecipe">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    serviceId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      query: {
        phone: '',
        delivery_name: '',
        service_id: '',
      },
      radio: '',
      copyRecipeShow: false,
      serviceList: [],
      tableLoading: false,
      checkServiceId: 0, // 选中的食谱
    }
  },
  methods: {
    showCopyRecipe() {
      this.copyRecipeShow = true
      this.toQuery()
    },
    toQuery() {
      // 查询营养师自定义食谱的服务订单
      this.$api.order.service
        .getCustomRecipeService({
          params: this.query
        })
        .then(res => {
          this.serviceList = res.data
        }).catch(err => {
          console.log(err)
        })
    },
    cancelCopy() {
      this.copyRecipeShow = false
    },
    copyRecipe() {
      this.$api.order.service
        .copyRecipe({
          data: { cur_service_id: this.serviceId, service_id: this.checkServiceId }
        })
        .then(res => {
          this.$notify({ title: '食谱复制成功', type: 'success', duration: 2500 })
          this.$parent.getRecipe()
          this.copyRecipeShow = false
        }).catch(res => {
          console.log(res)
        })
    },
    repeal() {
      this.query = {
        phone: '',
        delivery_name: '',
        service_id: '',
      }
      this.toQuery()
    },
    handleCurrentChange(val) {
      this.checkServiceId = val.id
    }
  }
}
</script>

<style scoped>
.search-box{
  margin-bottom: 10px;
}
.foot-info{
  display: inline-block;
  text-align: center;
  margin: 15px 0;
}
.food-input.el-input{
  width: 200px;
  margin-right: 10px;
}
</style>